<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="报警处理"
    width="730px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20" v-if="!(detail instanceof Array)">
        <el-col :span="12">
          <span class="label">服务名称:</span>
          <span class="value">{{ detail.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">设备位置:</span>
          <span class="value">{{ detail.address }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">设备状态:</span>
          <span class="value">
            <el-tag v-if="detail.status === 1" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警状态:</span>
          <span class="value">{{ detail.warning }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警等级:</span>
          <span class="value">{{ detail.level }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警类型:</span>
          <span class="value">{{ detail.type }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警开始时间:</span>
          <span class="value">{{ detail.startTime }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">处理状态:</span>
          <span class="value">
            <span v-if="detail.status === 0">未处理</span>
            <span v-else-if="detail.status === 1">处理中</span>
            <span v-else-if="detail.status === 2">已处理</span>
          </span>
        </el-col>
      </el-row>
      <div class="detail-title">处理</div>
      <el-form
        class="data-form"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="top"
      >
        <el-row :gutter="30">
          <el-col :span="20">
            <el-form-item label="报警原因说明" prop="remark">
              <el-input
                class="data-input"
                type="textarea"
                v-model="form.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="处理结果" prop="result">
              <el-radio-group v-model="form.result">
                <el-radio :value="1">已解决</el-radio>
                <el-radio :value="0">误报</el-radio>
                <el-radio :value="2">忽略</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">处理</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
  detail: {
    type: [Object, Array],
    default: () => {},
  },
})
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
const formRef = ref()
const form = ref({})
const rules = ref({
  remark: [{ required: true, message: '请输入报警原因说明', trigger: 'blur' }],
  result: [{ required: true, message: '请选择处理结果', trigger: 'blur' }],
})
const handleSubmit = () => {
  ElMessage.success('处理成功')
  emit('close', true)
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.detail-title {
  width: 100%;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 20px;
  position: relative;
  box-sizing: border-box;
  padding-left: 10px;
  &::after {
    position: absolute;
    content: ' ';
    width: 5px;
    height: 20px;
    background-color: #4677ee;
    border-radius: 2px;
    left: 0;
    top: 0;
  }
}
</style>
